<template>
    <view class="content">
        <image src="../../static/image/g_bg.png" class="bg"></image>
        <u-navbar :background="background" title="我的余额" title-color="#fff" :border-bottom="false" :immersive="true"
            :is-back="true" back-icon-color="#fff"></u-navbar>
            
        <view class="wrapper" :style="{paddingTop: statusBar + 120 + 'px'}">
            <view class="info">
                <image src="../../static/image/g_bg_02.png" class="bg-02"></image>
                <view class="i-top">
                    <view>
                        <view>我的余额</view>
                        <view class="i-price">￥<text>{{info.balance}}</text></view>
                    </view>
                    <view class="i-btn" @click="show = true">余额说明</view>
                </view>
            </view>
            
            <view class="nav">
                <view class="nav-i" @click="$gTo(`/pages/balance/recharge-list`)">
                    <image src="../../static/icon/g_icon15.png" class="icon15"></image>
                    <view>
                        <view>充值记录</view>
                        <view class="see">进入查看详情</view>
                    </view>
                </view>
                <view class="nav-i nav-i2" @click="$gTo(`/pages/balance/use-list`)">
                    <image src="../../static/icon/g_icon16.png" class="icon15"></image>
                    <view>
                        <view>消费记录</view>
                        <view class="see">进入查看详情</view>
                    </view>
                </view>
            </view>
            
            <template v-if="list.length > 0">
                <view class="title">请选择充值金额</view>
                <view class="box">
                    <view class="item" v-for="(item, index) in list" :key="index" 
                        :class="{active : item.isSelect}" @click="choose(item)">
                        <view class="chong" v-if="item.isSelect">充</view>
                        <view class="u-font-40 text-bold">{{item.amount}}<text class="u-font-32">元</text></view>
                        <view class="u-font-22 text-center">
                            <view v-if="item.presented_amount > 0">送{{item.presented_amount}}元</view>
							<view v-if="item.coupon&&item.coupon.offset_price">送{{item.coupon.offset_price}}元优惠券</view>
                        </view>
                    </view>
                </view>
                
                <view class="btn" @click="toPay">立即充值</view>
            </template>
        </view>
        
        <u-popup v-model="show" mode="center" border-radius="15">
        	<view class="rule-frame">
        		<view class="rule-frame-tit">平台说明</view>
        		<view class="rule-sub">
        		    <image src="../../static/icon/g_icon1.png" class="icon1"></image>
        		    <view>{{recharge.title}}</view>
        		</view>
        		<scroll-view scroll-y="true" style="height: 20vh;">
        		    <view class="privacy-txt" v-if="recharge.vice_data && recharge.vice_data.content">
        		        <rich-text :nodes="recharge.vice_data.content"></rich-text>
        		    </view>
        		</scroll-view>
                
        		<view class="rule-sub">
        		    <image src="../../static/icon/g_icon2.png" class="icon1"></image>
        		    <view>{{use.title}}</view>
        		</view>
        		<scroll-view scroll-y="true" style="height: 20vh;">
        		    <view class="privacy-txt" v-if="use.vice_data && use.vice_data.content">
        		        <rich-text :nodes="use.vice_data.content"></rich-text>
        		    </view>
        		</scroll-view>
        		<view class="rule-btn" @click="show = false">我知道了</view>
        	</view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                show: false,
                recharge: {},//充值
                use: {},//消费
                info: {},
                list: [],
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
            this.getUse()
            this.getList()
        },
        onShow() {
            this.getInfo()
        },
        methods: {
            toPay() {
                let cid = '', amount = ''
                this.list.forEach(cur => {
                    if (cur.isSelect) {
                        cid = cur.id
                        amount = cur.amount
                    }
                })
                
                this.$ajax('submitRecharge', {
                	userToken: this.$getSync('userToken'),
                    id: cid,//充值id
                    type: 1,//1-余额充值
                    pay_type: 1,//1-微信支付
                    amount: amount,//充值金额
                }).then(ret => {
                	if (ret.status == 0) {
                		this.$gTo(`/pages/pay/pay?id=${ret.data.id}&money=${ret.data.pay_amount}&from=chongzhi`)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            choose(item) {
                const nowStatu = item.isSelect
                this.list.forEach(cur => {
                    cur.isSelect = false
                })
                item.isSelect = !nowStatu
            },
            
            // 获取充值列表
            getList() {
            	this.$ajax('recharge_config', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.list = ret.data
                        if (this.list.length > 0) {
                            this.list.forEach((cur, index) => {
                                if (index == 0) {
                                    this.$set(cur, 'isSelect', true)
                                } else {
                                    this.$set(cur, 'isSelect', false)
                                }
                            })
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            getInfo() {
            	this.$ajax('getInfo', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.info = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 充值、消费说明
            getUse() {
            	this.$ajax('recharge_desc', {
            	    userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.recharge = ret.data.recharge_txt
            			this.use = ret.data.use_txt
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(0,0,0,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(0,0,0,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #fff;
    }
    .bg{
        width: 750rpx;
        height: 544rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .wrapper{
        padding: 30rpx;
    }
    .info{
        position: relative;
    }
    .bg-02{
        width: 690rpx;
        height: 291rpx;
    }
    .i-top{
        width: 610rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 85rpx;
        left: 45rpx;
        font-size: 36rpx;
        color: #4d3008;
    }
    .i-price{
        font-size: 37rpx;
        color: #995c1f;
        padding-top: 10rpx;
    }
    .i-price>text{
        font-size: 62rpx;
    }
    .i-btn{
        font-size: 24rpx;
        color: #995c1f;
        padding: 15rpx 25rpx;
        background-color: #fff6e5;
        border-radius: 50rpx;
    }
    
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0 45rpx;
    }
    .nav-i{
        width: 335rpx;
        height: 130rpx;
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        background-color: #fff5ed;
    }
    .nav-i2{
        background-color: #f4f6ff;
    }
    .icon15{
        width: 57rpx;
        height: 50rpx;
        margin-right: 20rpx;
    }
    .see{
        font-size: 24rpx;
        font-weight: normal;
        color: #8b8b8b;
    }
    
    .title{
        font-size: 34rpx;
        font-weight: bold;
        padding-bottom: 35rpx;
    }
    .box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .item{
        width: 220rpx;
        height: 143rpx;
        border: 2rpx solid #ec8332;
        border-radius: 15rpx;
        color: #ec8332;
        box-sizing: border-box;
        margin-right: 13rpx;
        margin-bottom: 13rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .item:nth-child(3n) {
        margin-right: 0;
    }
    .active{
        color: #fff;
        border: none;
        background: linear-gradient(to right, #fda211,#fe7f11);
    }
    .chong{
        width: 55rpx;
        height: 36rpx;
        background-color: #fff6ed;
        border-radius: 0 15rpx 0 15rpx;
        font-size: 21rpx;
        color: #fe8011;
        text-align: center;
        line-height: 36rpx;
        position: absolute;
        top: 0;
        right: 0;
    }
    .btn{
        background-color: #00734c;
        padding: 25rpx;
        border-radius: 50rpx;
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        margin-top: 40rpx;
    }
    
    
    .rule-frame {
    	width: 626rpx;
    	border-radius: 10rpx;
    	background-color: #fff;
    	padding: 40rpx 30rpx;
    }
    .rule-frame-tit {
    	font-size: 32rpx;
        font-weight: bold;
    	line-height: 34rpx;
    	color: #000000;
    	text-align: center;
    }
    .rule-sub{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        padding: 45rpx 0 25rpx;
    }
    .icon1{
        width: 34rpx;
        height: 35rpx;
        margin-right: 15rpx;
    }
    .privacy-txt {
        font-size: 26rpx;
        color: #949494;
    }
    .rule-btn {
    	width: 372rpx;
    	height: 80rpx;
    	font-size: 30rpx;
    	line-height: 80rpx;
    	color: #fff;
    	text-align: center;
    	background-color: #00734c;
        border-radius: 50rpx;
    	margin: 30rpx auto 0;
    }
    

</style>
